<template>
    <view :class="'cell ' + (isTouchMoveTemp ? 'cell-active' : '') + ' ' + (disabled ? 'disabled' : '') + ' ' + (actived ? 'actived' : '')" :style="styles">
        <view class="cell-body" :style="'transform: translateX(' + translateX + 'px);margin-left: -' + translateX + 'px; ' + transform">
            <view class="cell-touch" :style="txtStyle" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchE" @tap="onBindTap">
                <view class="cell-left">
                    <view class="cell-icon">
						<template v-if="customPrefix==='false'">
							<image
								:src="icon" 
								lazy-load 
								class="cell-image" 
								:style="{backgroundColor: color,borderRadius:radius?'100%':'0',width:size+'rpx',height:size+'rpx'}" 
								v-if="icon"
							></image>
						</template>
						<template v-else>
							<uni-icons :custom-prefix="customPrefix" :type="icon" :size="size" :color="color" style="margin-left: 20rpx;" v-if="icon"></uni-icons>
						</template>
						<slot name="icon"></slot>
                    </view>
                    <view class="cell-headline">
                        <view class="cell-title">{{ title }}</view>
                        <slot name="title"></slot>
                        <view class="cell-sub-title">{{ subTitle }}</view>
                        <slot name="subTitle"></slot>
                    </view>
                </view>
                <view class="cell-right">
                    <text class="cell-tips" :style="'padding-right:' + (more ? '' : '20rpx')">{{ tips }}</text>
                    <view class="cell-arrow-outer" v-if="more">
                        <view class="cell-arrow"></view>
                    </view>
                    <slot name="tips" @tap.native.stop.prevent="onCatchTap"></slot>
                </view>
            </view>
        </view>
        <view class="cell-hidden" :style="'transform: translateX(' + translateX + 'px); ' + transform">
            <slot name="action"></slot>
            <view v-if="action" class="cell-action cell-del" @tap.stop.prevent="onCatchtapDelete">{{$t('General.family.delete')}}</view>
        </view>
    </view>
</template>

<script>
// pages/touch/touch.js
export default {
    data() {
        return {
            startX: 0,
            //开始坐标
            startY: 0,
            transform: '',
            txtStyle: '',
            delBtnWidth: 60,
            hasTap: true ,// 解决touchend和bindtap之间的冲突
			
			isTouchMoveTemp:false
			
        };
    },
    options: {
        multipleSlots: true,
        // 在组件定义时的选项中启用多slot支持
        styleIsolation: 'apply-shared' // 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
    },
    /**
     * 组件的属性列表
     */
    props: {
        styles: {
            type: String,
            default: ''
        },
        // 自定义图标
        customPrefix:{
        	type:String,
        	default:'iconfont'
        },
        // 图标图像
        icon: {
            type: String,
            default: ''
        },
        // 图标尺寸
        size:{
        	type:Number,
        	default:24
        },
        // 图标或图片颜色
        color: {
            type: String,
            default: ''
        },
		// 圆角图标
		radius:{
			type:Boolean,
			default:false
		},
        // 标题（名称）
        title: {
            type: String,
            default: ''
        },
        // 小标题（名称）
        subTitle: {
            type: String,
            default: ''
        },
        // 提示（说明）
        tips: {
            type: String,
            default: ''
        },
        // 箭头
        more: {
            type: Boolean,
            default: true
        },
        // 操作
        action: {
            type: Boolean,
            default: true
        },
        // 跳转
        to: {
            type: String,
            default: ''
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 选中
        actived: {
            type: Boolean,
            default: false
        },
        // 是否显示滑动后的状态
        isTouchMove: {
            type: Boolean,
            default: false
        },
        // touch事件是否可用
        isTouch: {
            type: Boolean,
            default: true
        },
        // tap事件是否可用
        isTap: {
            type: Boolean,
            default: true
        },
        // 隐藏区域的宽度
        translateX: {
            type: Number,
            default: 80
        }
		
    },
    methods: {
        //手指触摸动作开始 记录起点X坐标
        touchstart: function (e) {
         

            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTouch) {
                return;
            } //开始触摸时 重置所有删除
            //只操作为true的

            if (this.isTouchMoveTemp) {
                this.isTouchMoveTemp = false;
            }

			this.startX = e.changedTouches[0].clientX
			this.startY = e.changedTouches[0].clientY
			// this.transform = `transform: translateX(${this.translateX}px)`
            // console.log(this.startX, this.startY, this.transform)
        },
        //滑动事件处理
        touchmove: function (e) {
            // console.log('touchmove:', e);
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTouch) {
                return;
            }

            var that = this;
            var index = e.currentTarget.dataset.index;
            var //当前索引
                startX = that.startX;
            var //开始X坐标
                startY = that.startY;
            var //开始Y坐标
                touchMoveX = e.changedTouches[0].clientX;
            var //滑动变化坐标
                touchMoveY = e.changedTouches[0].clientY;
            var //滑动变化坐标
                //获取滑动角度
                angle = that.angle(
                    {
                        X: startX,
                        Y: startY
                    },
                    {
                        X: touchMoveX,
                        Y: touchMoveY
                    }
                );
            let isTouchMove = false; 
			
			//滑动超过30度角 return
            if (Math.abs(angle) > 30) {
                return;
            }
            if (touchMoveX > startX) {
                //右滑
                isTouchMove = false;
            } else {
                //左滑
                isTouchMove = true;
            } //更新数据

            this.isTouchMoveTemp = isTouchMove,
            this.hasTap = false
        },
        // 滑动结束
        touchE: function (e) {
            // console.log('touchend:', e);
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTouch) {
                return;
            }
            var that = this;

            if (e.changedTouches.length == 1) {
                //手指移动结束后触摸点位置的X坐标
                var endX = e.changedTouches[0].clientX; //触摸开始与结束，手指移动的距离
                var endY = e.changedTouches[0].clientY;
                var //滑动变化坐标
                    //获取滑动角度
                    angle = that.angle(
                        {
                            X: this.startX,
                            Y: this.startY
                        },
                        {
                            X: endX,
                            Y: endY
                        }
                    );
                // console.log(angle, '角度')
                if(angle < 10) {
                    var disX = that.startX - endX;
                    var delBtnWidth = that.delBtnWidth; //如果距离小于删除按钮的1/2，不显示删除按钮

                    var transform = disX > delBtnWidth / 2 ? 'transform: translateX(0px)' : `transform: translateX(${this.translateX}px)`;
                    var txtStyle = disX > delBtnWidth / 2 ? 'left:-' + delBtnWidth + 'rpx' : 'left:0rpx'; //获取手指触摸的是哪一项

                    var index = e.currentTarget.dataset.index;
                    this.transform = transform;
                    this.txtStyle = txtStyle; //更新列表的状态
                }
               return
            }
        },

        /**
         * 计算滑动角度
         * @param {Object} start 起点坐标
         * @param {Object} end 终点坐标
         */
        angle: function (start, end) {
            var _X = end.X - start.X;

            var _Y = end.Y - start.Y; //返回角度 /Math.atan()返回数字的反正切值

            return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
        },

        // 跳转或操作
        onBindTap(ev) {
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTap) {
                return;
            } // console.log('onBindTap:', ev);

            if (this.hasTap) {
                // 有to且不为空的情况下，做跳转处理
                if (this.to !== '') {
                    uni.navigateTo({
                        url: this.to
                    });
                } // 否则自定义事件处理
                else {
                    this.$emit('jftap', {
                        detail: ev
                    });
                }
            } else {
                this.hasTap = true
            }
        },

        // 用于阻止冒泡（点击子元素事件不触发父元素事件）
        onCatchTap(ev) {
            return;
        },

        // 删除
        onCatchtapDelete(ev) {
            // console.log(ev);
            this.transform = `transform: translateX(${this.translateX}px)`
            this.$emit('jfdelete', {
                detail: ev
            });
        },

        // 关闭隐藏按钮
        onBindHide() {
            this.transform = `transform: translateX(${this.translateX}px)`
        }
    },
    beforeMount: function () {
        // 在组件实例进入页面节点树时执行
		this.isTouchMoveTemp = this.isTouchMove
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    onPageShow: function () {
        // 页面被展示
    },
    onPageHide: function () {
        // 页面被隐藏
		this.transform = `transform: translateX(${this.translateX}px)`,
		this.isTouchMoveTemp = false
    },
    onPageResize: function (size) {
        // 页面尺寸变化
    }
};
</script>
<style>
.cell {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 1px;
}

.cell:link {
    background-color: #ffffff;
}

.cell:visited {
    background-color: #ffffff;
}

.cell:hover {
    background-color: #ffffff;
}

.cell:active {
    background-color: #eeeeee;
}

.cell-body {
    width: 100%;
    margin-right: 0;
    transition: all 0.4s;
}

.cell-touch {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cell-left {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.cell-right {
    display: flex;
    justify-content: left;
    flex-direction: row;
    align-items: center;
}

.cell-icon {
}
.cell-image {
    display: block;
    width: 72rpx;
    height: 72rpx;
    margin-left: 20rpx;
}
.cell-headline {
    text-align: left;
    padding: 20rpx;
    min-height: 44rpx;
}
.cell-title {
    font-size: 30rpx;
	max-width: 50vw;
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}

.cell-sub-title,
.cell-tips {
    font-size: 24rpx;
    color: #999999;
	max-width: 62vw;
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}
.cell-arrow-outer {
    width: 22rpx;
    height: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
}
.cell-arrow {
    width: 10rpx;
    height: 10rpx;
    border-width: 2rpx;
    border-style: solid;
    border-color: #666666;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}

.cell-hidden {
   /* display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; */
    color: #fff;
    /* transform: translateX(110px); */
    transition: all 0.4s;
	width: 80px;
	text-align: center;
}

.cell-body,
.cell-hidden {
    transform: translateX(0);
}
.cell-action {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #666666;
    font-size: 26rpx;
    /* padding: 0 40rpx; */
	width: 80px;
	margin-left: 1px;
}
.cell-del {
    background: #f4310a;
}

/* 禁用 */
.disabled {
    cursor: not-allowed;
    background: #fbfcfd;
}
.disabled:link,
.disabled:visited,
.disabled:hover,
.disabled:active {
    background-color: #fbfcfd;
}

.disabled .cell-title {
    color: #999999;
}
.disabled .cell-sub-title,
.disabled .cell-tips {
    color: #cccccc;
}
.disabled .cell-arrow {
    border-color: #cccccc;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* 选中 */
.actived {
    background: #f0faff;
}
.actived:link,
.actived:visited,
.actived:hover,
.actived:active {
    background-color: #e5eef3;
}

.actived .cell-title {
    color: mediumblue;
}
.actived .cell-sub-title,
.actived .cell-tips {
    color: #89bbf0;
}
.actived .cell-arrow {
    border-color: #89bbf0;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
</style>
